import React, { Component } from 'react'
import { CloseOutlined, UserOutlined, WeiboOutlined, QqOutlined, MailOutlined } from '@ant-design/icons';
import { message,Form, Input, Button, Checkbox } from 'antd';
import { Link, withRouter } from "react-router-dom"

import styles from './index.module.css'
// import axios from 'axios'
import request from '../../utils/request'



// import { connect } from 'react-redux'
// TODO： 其实这两种登陆方式可以合并成一个组件

// @withRouter
// @connect(({ addToken }) => ({ ...addToken }))

class PhoneLogin extends Component {
    constructor(props) {
        super(props);
    }
    onFinish = (values) => {
        const { dispatch } = this.props;
        console.log(values, 'values');
        let uemail = values.email
        let password = values.password
        request.post("http://lmx.free.idcfengye.com/user/nice/user/loginByUemail", { uemail, password }).then(res => {
            console.log(res)
            if(!res.data) {
                message.error('邮箱或密码错误');
                return
            }
            localStorage.setItem('token', res.data);          
            message.success('登录成功');
            setTimeout(()=>{
                this.props.history.push('/');
            },1000)
        })
    }


    render() {
        return (
            <div style={{ padding: '5%', width: '100%' }} className={styles.phone}>
                <header style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', fontSize: '16px' }}>
                    <CloseOutlined style={{ color: '#999' }} onClick={() => this.props.history.push('/register')} />
                    <span>帮助</span>
                </header>
                <h2 style={{ fontSize: '24px', fontWeight: 'bold', marginTop: '15%', marginLeft: '10%' }}>邮箱登录</h2>
                <Form
                    name="basic"
                    initialValues={{
                        remember: true,
                    }}
                    ref={this.formRef}
                    onFinish={this.onFinish}
                    style={{ fontWeight: 'bold', margin: '2% 10% ' }}
                >
                    <Form.Item
                        label="邮箱"
                        name="email"
                        rules={[
                            {
                                required: true,
                                message: '请输入你的邮箱!',
                            },
                        ]}
                        style={{ marginBottom: '3%' }}
                    >
                        <Input />
                    </Form.Item>

                    <Form.Item
                        label="密码"
                        name="password"
                        rules={[
                            {
                                required: true,
                                message: '请输入密码!',
                            },
                        ]}
                        style={{ marginBottom: '3%' }}
                    >
                        <Input.Password />
                    </Form.Item>

                    <Form.Item name="remember" valuePropName="checked" style={{ width: '100%', marginBottom: '3%' }}>
                        <Checkbox>记住密码</Checkbox>
                        <Link to={{ pathname: '/forget' }}><span style={{ float: 'right', color: '#333' }}>忘记密码？</span></Link>
                    </Form.Item>

                    <Form.Item >
                        <Button htmlType="submit" style={{ backgroundColor: '#fee004', fontSize: '14px', fontWeight: 'bold', width: '100%', outline: 'none', border: '0' }}>
                            登录
                        </Button>
                    </Form.Item>
                </Form>

                <p style={{ width: '100%', textAlign: 'center', marginTop: '30%', fontSize: '13px' }}>其他社交帐号快速登录</p>
                <div style={{ width: '100%', padding: '0 17%', display: 'flex', justifyContent: 'space-around', fontSize: '20px' }}>
                    <Link to='/PhoneLogin'><UserOutlined ined style={{ color: '#5bb338' }} /></Link>
                    <Link><WeiboOutlined style={{ color: '#f45456' }} /></Link>
                    <Link><QqOutlined style={{ color: '#2fb2e6' }} /></Link>
                    <Link to='/EmailLogin'><MailOutlined style={{ color: '#fb7520' }} /></Link>
                </div>
                <p style={{ width: '100%', textAlign: 'center', marginTop: '3%', fontSize: '13px' }}>登录注册表示同意用户协议、隐私政策</p>
            </div>
        )
    }
}

export default withRouter(PhoneLogin)

